<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试经验主页</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1992971_c1dhs6uqoej.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html{
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        h1,h2,h3,h4,h5,h6{
            font-size: 14px;
            font-weight: normal;
        }
        i,em{
            font-style: normal;
        }
        b,strong{
            font-weight: normal;
        }
        a{
            text-decoration: none;
            color: #000;
        }

        /* 主页 */
        #home{
            width: 100%;
        }
        /* 版心 */
        .header-con,.userInfo-con,.experience-con{
            width: 1160px;
            margin: 0 auto;
        }
        /* 头部 */
        #header{
            width: 100%;
            background-color: #090723;
            height: 55px;
        }
        .header-con{
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .header-con h1{
            font-size: 20px;
            color: #fff;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bolder;
        }
        .nav{
            height: 100%;
        }
        .nav li{
            float: left;
            height: 100%;
        }
        .nav li a{
            display: inline-block;
            height: 55px;
            line-height: 55px;
            padding: 0 25px;
            color: #fff;
            opacity: 0.5;
            cursor: pointer;
        }
        .nav li a:hover{
            opacity: 1;
        }
        .search{
            color: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.5);
            padding: 5px 15px 5px 15px;
            font-size: 12px;
            border-radius: 15px ;
        }
        .search i{
            font-size: 12px;
        }
        .search .iconfont{
            font-size: 18px;
            font-weight: bold;
            margin-left: 30px;
        }
        /* 个人信息 */
        #uesrInfo{
            width: 100%;
            background-color: #090723;
            height: 150px;
            position: relative;
        }
        .userInfo-con{
            height: 100%;
            display: flex;
            align-items: flex-end;
        }
        .userInfo-con dt{
            width: 130px;
            height: 130px;
        }
        .userInfo-con dt img{
            width: 100%;
            height: 100%;
        }
        .userInfo-con dd{
            flex: 1;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 50px 0 0 40px;
        }
        .userInfo-con dd a{
            font-size: 22px;
            color: #fff;
            line-height: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
        .userInfo-con dd ol{
            color: rgba(255, 255, 255, 0.5);
            height: 50px;
            line-height: 50px;
        }
        .userInfo-con dd ol .active{
            border-bottom: 3px solid #ff0000;
            color: #fff;
        }
        .userInfo-con dd ol li{
            float: left;
            padding: 0 8px;
            margin: 0 20px;
            height:48px;
            border-bottom: 3px solid transparent;
            cursor: pointer;
        }
        /* .userInfo-con dd ol li:hover{
            color: #fff;
        } */
        .writeExp{
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #16c2c2;
            position: absolute;
            bottom: -25px;
            right: 160px;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            z-index: 10;
        }
        .writeExp .iconfont{
            font-size: 25px;
            color: #fff;
        }
        /* swiper */
        #swiper{
            width: 100%;
            background-color: #eee;
            /* overflow: hidden; */
        }
        .swiper-container {
            width: 1160px;
            height: 300px;
        } 
        .swiper-slide img{
            width: 100%;
            height: 100%;
        }
        /* 面经内容 */
        #experience{
            width: 100%;
            background-color: #eee;
        }
        .experience-con{
            background-color: #fff;
            overflow: hidden;
        }
        .experience-con  ul{
            margin: 40px;
            margin-top: 10px;
        }
        /* 排序 */
        .experience-con h6{
            height: 22px;
            margin: 40px 40px 10px 40px;
        }
        .experience-con h6 em{
            color: #888;
            padding: 0 10px;
            font-size: 14px;
            line-height: 14px;
            height: 14px;
            display: inline-block;
            cursor: pointer;
        }
        .orderHeat{
            border-right: 1px solid #ddd;
        }
        .experience-con h6 .focus{
            color: #16c2c2;
        }
        .container li{
            padding: 10px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .container li:hover{
            box-shadow: 0 0 10px #ddd;
        }
        .container li>a{
            display: inline-block;
            width: 100%;
        }
        .container li h2{
            font-size: 16px;
            cursor: pointer;
            color: #333;
            margin-bottom: 10px;
            
        }
        .container li h2:hover{
            color: #16c2c2;
        }
        .container li p{
            font-size: 14px;
            color: #999;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
        }
        .exp_bottom{
            height: 40px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .exp_l{
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .exp_photo{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        .exp_photo img{
            width: 100%;
            height: 100%;
        }
        .exp_l i{
            margin: 0 10px 0 6px;
            color: #42c1a2;
        }
        .exp_l b{
            color: #aaa;
        }
        .exp_l strong{
            color: #aaa;
            margin-left: 5px;
        }
        .exp_r{
            display: flex;
            align-items: center;
            color: #999;
        }
        /* 点赞数 */
        .exp_like{
            margin-right: 20px;
        }
        .exp_like:hover,.exp_collect:hover{
            color: #16c2c2;
        }
        /* 底部 */
        #footer{
            width: 100%;
            height: 200px;
            background-color: #06060b;
            color: #60606d;
        }
        .footer-con{
            width: 1160px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .footer_l{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .footer_l h2{
            margin-right: 40px;
        }
        .footer_l h2 div{
            width: 130px;
            height: 130px;
            background-color: #888;
            border-radius: 5px;
            position: relative;
        }
        .footer_l h2 img{
            width: 110px;
            height: 110px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .footer_l h2 i{
            text-align: center;
        }
        .footer_l p{
            font-size: 20px;
            color: #fff;
            margin-right: 40px;
        }
        .footer_r{
            border-left: 1px solid #646f7c;
            height: 150px;
            padding-left: 40px;
        }
        .footer_r h3{
            font-size: 20px;
            color: #fff;
        }
        .footer_r p{
            margin-top: 20px;
        }
        /* 置顶 */
        .top{
            position: fixed;
            right: 10px;
            bottom: 90px;
            width: 50px;
            height: 50px;
            background-color: #777;
            border-radius: 50%;
            line-height: 50px;
            text-align: center;
            z-index: 20;
        }
        .top:hover{
            background-color: #555;
        }
        .top .iconfont{
            font-size: 30px;
            color: #fff;
        }
        .template{
            display: none;
        }

    </style>
</head>
<body>
    <!-- 主页 -->
    <div id="home">
        <!-- 头部 -->
        <div id="header">
            <div class="header-con">
                <h1>interview<sup>+</sup></h1>
                <ul class="nav">
                    <li><a class="a_home">首页</a></li>
                    <li><a class="a_exp" target="_blank">面经合集</a></li>
                    <li><a class="a_company" target="_blank">公司面经</a></li>
                </ul>
                <div class="search">
                    <i>请输入搜索的职位或公司</i>
                    <span class="iconfont icon-fangdajing"></span>
                </div>
            </div>
        </div>
        <!-- 个人信息 -->
        <div id="uesrInfo">
            <dl class="userInfo-con">
                <dt>
                    <img class="headPhoto" src="./images/1.png" alt="">
                </dt>
                <dd>
                    <a target="_blank" class="userName">未登录,点击登录</a>
                    <ol>
                        <li>我的面经</li>
                        <li>我的收藏</li>
                        <li>我的资料</li>
                    </ol>
                </dd>
                <!-- 写面经 -->
                <a target="_blank" title="分享我的面经" class="writeExp">
                    <span class="iconfont icon-pen"></span>
                </a>
            </dl>
        </div>
        <!-- swiper -->
        <div class="" id="swiper">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./images/5.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/6.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/7.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> 
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
        <!-- 面经内容 -->
        <div id="experience">
            <div class="experience-con">
                <!-- 排序 -->
                <h6>
                    <em class="orderHeat focus">按热度</em>
                    <em class="orderTime">按时间</em>
                </h6>
                <!-- 面经容器 -->
                <ul class="container">
                </ul>
                <!-- 模板 -->
                <li class="template">
                    <a target="_blank">
                        <h2>猿辅导8.8面试经历（热乎）</h2>
                        <p></p>
                    </a>
                    <div class="exp_bottom">
                        <div class="exp_l">
                            <div class="exp_photo">
                                <img src="./images/1.png" alt="">
                            </div>
                            <i>救救孩子吧007</i>
                            <b>今天</b>
                            <strong>11:15:24</strong>
                        </div>
                        <div class="exp_r">
                            <!-- 点赞数 -->
                            <div class="exp_like">
                                <span class="iconfont icon-diancai1-copy-copy"></span>
                                <i class="expLikeNum">10</i>
                            </div>
                            <!-- 收藏数 -->
                            <div class="exp_collect">
                                <span class="iconfont icon-star-filled"></span>
                                <i class="expCollectNum">10</i>
                            </div>
                        </div>
                    </div>
                </li>
            </div>
        </div>

        <!-- 底部 -->
        <div id="footer">
            <div class="footer-con">
                <div class="footer_l">
                    <h2>
                        <div><img src="./images/3.png" alt=""></div>
                        <i>扫一扫，加入我们</i>
                    </h2>
                    <p>求职之前，先撸面经</p>
                </div>
                <div class="footer_r">
                    <h3>interview<sup>+</sup></h3>
                    <p>面试经验分享倾力于打造求职者经验分享交流平台</p>
                </div>
            </div>
        </div>
        <!-- 置顶 -->
        <div class="top">
            <span class="iconfont icon-zhiding1"></span>
        </div>

    </div>

    <script src="./js/jquery.min.js"></script> 
    <script>
        $(function(){
            // 从登陆成功页跳转到首页，渲染userName
            if(window.location.href.indexOf("?") !== -1){
                $(".userName").html(window.location.href.split("?")[1].split("=")[1])
            }
            // 初始化页面，加载localStorage中userName
            if(localStorage.getItem("userName")){
                $(".userName").html(localStorage.getItem("userName"))
            }
            // 渲染面经内容
            draw()
        })
        // 轮播图
        new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
            el: '.swiper-scrollbar',
            },
        }) 
        $(".userName").click(function(){
            // 点击跳转登录页面
            if(this.innerHTML === "未登录,点击登录"){
                $(this).attr("href","http://127.0.0.1:84/log.html") 
            }
            // 个人中心
            else{
                $(this).attr("href",`http://127.0.0.1:84/me.html?name=${$(".userName").html()}`) 
            }
        })
        // 置顶
        $(".top").click(function(){
            document.documentElement.scrollTop = 0
        })
        // 排序
        $(".orderHeat").click(function(){
            $(".orderTime").removeClass("focus")
            $(this).addClass("focus")
            draw()
        })
        $(".orderTime").click(function(){
            $(".orderHeat").removeClass("focus")
            $(this).addClass("focus")
            draw("time")
        })
        // 跳转写面经页面
        $(".writeExp").click(function(){
            if($(".userName").html() === "未登录,点击登录"){
                alert("未登录，请先登录")
                $(this).attr("href","http://127.0.0.1:84/log.html") 
            }
            else{
                $(this).attr("href",`http://127.0.0.1:84/writeExp.html?name=${$(".userName").html()}`)
            }
        })
        // 跳转到面试合集
        $(".a_exp").click(function(){
            $(this).attr("href",`http://127.0.0.1:84/experience.html?name=${$(".userName").html()}`)
        })
        // 跳转到公司面经
        $(".a_company").click(function(){
            $(this).attr("href",`http://127.0.0.1:84/company.html?name=${$(".userName").html()}`)
        })



        // 获取数据
        function draw(way){
            // 渲染面经内容
            $.ajax({
                url:"http://127.0.0.1:84/getData",
                data:{
                    way : way || "likes"
                },
                success(data){
                    let list = JSON.parse(data)
                    let template = $(".template")
                    // 清空 模板容器
                    $(".container").empty()
                    list.forEach(item => {
                        let newLi = template.clone(true)
                        newLi.removeClass()
                        $(".experience-con ul").append(newLi)

                        newLi.find("a").attr("href",`http://127.0.0.1:84/list.html?id=${item.id}`)
                        newLi.find("h2").html(item.title)
                        newLi.find("p").html(item.con)
                        newLi.find(".exp_photo img").attr("src",item.photo)
                        newLi.find(".exp_l i").html(item.userName)
                        newLi.find(".exp_l strong").html(item.time)
                        newLi.find(".expLikeNum").html(item.likes)
                        newLi.find(".expCollectNum").html(item.collect)
                    });
                }
            })
        }
          
    </script>
</body>
</html>